<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%  
	//不允许浏览器端或缓存服务器缓存当前页面信息。
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);   
%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>注册-${_systemName}</title>
		
		<meta name="description" content="User login page" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link type="images/x-icon" rel="shortcut icon" href="${_staticPath}/custom/assets/favicon.ico">
		

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${_staticPath}/assets/css/bootstrap.css" />
		<link rel="stylesheet" href="${_staticPath}/assets/css/font-awesome.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="${_staticPath}/assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="${_staticPath}/assets/css/ace.css" />
		<link rel="stylesheet" href="${_staticPath}/assets/css/ace-rtl.css" />
		<link rel="stylesheet" href="${_staticPath}/custom/assets/ace.custom.css" />
	</head>

	<body class="login-layout">
		<div class="main-container">
			<div class="main-content">
				<div class="row">
					<div class="col-sm-10 col-sm-offset-1">
						<div class="login-container">
							<div class="center">
								<h1>
									<i class="ace-icon fa fa-leaf green"></i>
									<!-- <span class="red">XX</span> -->
									<span class="white" id="id-text2">${_systemAdminName}</span>
								</h1>
								<h4 class="blue" id="id-company-text">&copy; ${_companyName}</h4>
							</div>

							<div class="space-6"></div>

							<div class="position-relative">
								<div id="login-box" class="login-box visible widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header blue lighter bigger">
												<i class="ace-icon fa fa-coffee green"></i>
												请填写注册信息
											</h4>
											<div class="space-6"></div>

										<!-- PAGE CONTENT BEGINS -->
										<form id="_registerForm" class="form-horizontal" role="form" validate="true">
											<input type="hidden" name="id" value="${user.id}">
											<div class="form-group">
												<label for="_account" class="col-sm-3 control-label no-padding-right">
												<span class="form-star">*</span>登录名</label>
												<div class="col-sm-9">
													<div class="input-medium help-validate">
														<div class="input-group">
															<input id="_account" name="account" type="text"
																value="${user.account}" class="form-data"
																ajax="{url : '${_path}/register/validateAccount', dataId : '_registerForm'}"
																required="true" minlength='4' maxlength='64' />
														</div>
													</div>
												</div>
											</div>

											<div class="form-group">
												<label class="col-sm-3 control-label no-padding-right"
													for="form-field-pass1"><span class="form-star">*</span>密码</label>

												<div class="col-sm-9">
													<div class="help-validate">
														<input id="_password" name="password"
															type="password" value="" class="form-data"
															required="true" minlength='6' maxlength='16' />
													</div>
												</div>
											</div>

											<div class="form-group">
												<label class="col-sm-3 control-label no-padding-right"
													for="form-field-pass2"><span class="form-star">*</span>确认密码</label>

												<div class="col-sm-9">
													<div class="help-validate">
														<input id="_confirmPassword" name="confirmPassword"
															type="password" value="" class="form-data"
															required="true" equalsTo="_password:两次输入的密码不一致"
															minlength='6' maxlength='16' />
													</div>
												</div>
											</div>

											<div class="form-group">
												<label class="col-sm-3 control-label no-padding-right"><span class="form-star">*</span>角色</label>
												<div class="col-xs-12 col-sm-9">
													<div class="clearfix help-validate" style="line-height: 33px;">
														<c:forEach var="item" items="${roleList}" begin="0" end="0">
															<label> <input name="roleId" type="radio"  value="${item.id}" class="ace roleCheckbox"
																${item.isChecked ? 'checked="checked"' : ''}/> 
																<span class="lbl">&nbsp;&nbsp;${item.name}</span>
															</label>
														</c:forEach>
														<c:forEach var="item" items="${roleList}" begin="1">
															<label> <input name="roleId" type="radio"  value="${item.id}" class="ace roleCheckbox" checked="checked"/> 
																<span class="lbl">&nbsp;&nbsp;${item.name}</span>
															</label>
														</c:forEach>
														<input id="_roleIds" type="hidden" name="roleIds" value="">
													</div>
												</div>
											</div>
										
											<div class="form-group">
												<label class="col-sm-3 control-label no-padding-right">留言框</label>
												<div class="col-sm-9">
													<div class="help-validate">
														<textarea name="message" rows="3" cols="20" class="form-data"></textarea>
													</div>
												</div>
											</div>

											<div class="clearfix">
												<button id="registerButton" type="button"
													class="width-35 pull-right btn btn-sm btn-primary">
													<i class="ace-icon fa fa-user-plus"></i> <span
														class="bigger-110">提交</span>
												</button>
											</div>
											
										</form>
										</div><!-- /.widget-main -->

										
									</div><!-- /.widget-body -->
								</div><!-- /.login-box -->

							</div><!-- /.position-relative -->

						<div class="navbar-fixed-top align-right">
								<br />
								&nbsp;
								<a id="btn-login-dark" href="#">Dark</a>
								&nbsp;
								<span class="blue">/</span>
								&nbsp;
								<a id="btn-login-blur" href="#">Blur</a>
								&nbsp;
								<span class="blue">/</span>
								&nbsp;
								<a id="btn-login-light" href="#">Light</a>
								&nbsp; &nbsp; &nbsp;
							</div>
						</div>
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='${_staticPath}/assets/js/jquery.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->
		
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='${_staticPath}/assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
		</script>
		
		<script type="text/javascript" src="${_staticPath}/custom/jquery.cookie.js"></script>
		<script type="text/javascript" src="${_staticPath}/custom/jquery.form.min.js"></script>
		<script type="text/javascript" src="${_staticPath}/custom/jquery.validate-2.0.min.js"></script>
		<script type="text/javascript" src="${_staticPath}/custom/jquery.validate-2.0.custom.min.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) { 
				//验证是否存在错误消息
				var fail = '${errorMessage}';
				if(fail != null && fail != ''){
					alert(fail);
				}
            	
				//判断之前是否有设置cookie
				if($.cookie('_account') != undefined){
					$("#_account").val($.cookie('_account'));
					
					$("#_password").focus();
					$("#_rememberMe").attr("checked", true);
				}
				else{
					$("#_account").focus();
					$("#_rememberMe").attr("checked", false);
				}
			 	
				$('#btn-login-dark').on('click', function(e) {
					$('body').attr('class', 'login-layout');
					$('#id-text2').attr('class', 'white');
					$('#id-company-text').attr('class', 'blue');
					
					e.preventDefault();
			 	});
			 	$('#btn-login-light').on('click', function(e) {
					$('body').attr('class', 'login-layout light-login');
					$('#id-text2').attr('class', 'grey');
					$('#id-company-text').attr('class', 'blue');
					
					e.preventDefault();
			 	});
			 	$('#btn-login-blur').on('click', function(e) {
					$('body').attr('class', 'login-layout blur-login');
					$('#id-text2').attr('class', 'white');
					$('#id-company-text').attr('class', 'light-blue');
					
					e.preventDefault();
			 	});
			 	
			 	
			 	//点击注册
				$("#registerButton").click(function() {
					if($('#_registerForm').validate()){
						
						var roleIds = "";//代表角色
						$("input[name='roleId']:checked").each(function(i, d){
							if(i > 0){
								roleIds += ",";
							}
							roleIds += $(this).val();
						});
						$("#_roleIds").val(roleIds);
						
						console.log($.formJson('_registerForm'));
						$.post("${_path}/register", $.formJson('_registerForm'),function(d) {
							if(d){
								if(d.code == 1){
									alert("注册信息已提交，请等待管理员审批！");
									//$.aceRedirect("${_path}");
									window.location.href="${_path}";
								}
								else {
									$.gritter.add({text: d.message});
								}
							}
				        },'json');
					}
				});

				// 回车绑定
				$(".form-data").bind('keypress', function(event) {
					if(event.keyCode == "13"){
						event.preventDefault();
						$("#registerButton").click();
					}
				});
				
			});
		</script>
	</body>
</html>
